<template>
  <div class="RechargeRecord">
    <el-card class="searchBox">
      <div class="one">
        <el-input
          v-model="id"
          placeholder="请输入ID"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>

        <el-input
          v-model="phone"
          placeholder="请输入手机号"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
        ></el-input>
        <el-input v-model="orderNumber" placeholder="请输入订单号"></el-input>
        <el-input
          v-model="pay_order_number"
          placeholder="请输入第三方订单号"
        ></el-input>
        <el-select v-model="stateVal" placeholder="请选择封禁状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="rechargeVal" placeholder="请选择充值类型">
          <el-option
            v-for="item in rechargeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="paymentMethodVal" placeholder="支付方式">
          <el-option
            v-for="item in paymentMethodOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="paymentStatusVal" placeholder="支付状态">
          <el-option
            v-for="item in paymentStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="gradeTimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
        <el-button class="btn" @click="rechargeRechargeAuditBtn"
          >搜索查询</el-button
        >
      </div>
      <el-button @click="excel" style="float: right; margin: 10px"
        >导出Excel</el-button
      >
      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column prop="order_status" label="订单状态">
          <template slot-scope="scope">
            <span>{{
              scope.row.order_status == 0
                ? "未支付"
                : scope.row.order_status == 1
                ? "已支付"
                : "支付失败"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderNumber" label="订单号"> </el-table-column>
        <el-table-column prop="pay_order_number" label="第三方订单">
        </el-table-column>
        <el-table-column prop="pay_type" label="支付方式">
          <template slot-scope="scope">
            <span>{{
              scope.row.pay_type == 1
                ? "支付宝"
                : scope.row.pay_type == 2
                ? "微信"
                : scope.row.pay_type == 3
                ? "IOS"
                : "无"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payTime" label="充值时间"> </el-table-column>
        <el-table-column prop="type" label="充值类型">
          <template slot-scope="scope">
            <span>{{ scope.row.type == 1 ? "金币" : "会员" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="用户ID"> </el-table-column>
        <el-table-column prop="nickName" label="用户昵称"> </el-table-column>
        <!-- <el-table-column prop="code" label="邀请码"> </el-table-column> -->
        <el-table-column prop="payAmount" label="充值金额"> </el-table-column>
        <el-table-column prop="goldCoin" label="充值金币"> </el-table-column>
        <!-- <el-table-column prop="channel" label="充值渠道"> </el-table-column> -->
        <el-table-column prop="state" label="充值功能">
          <template slot-scope="scope">
            <span>{{ scope.row.state == 0 ? "封禁" : "正常" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="封禁管理">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click="userBanBtn(scope.row)"
              round
              v-if="scope.row.state == 1"
              >封禁充值</el-button
            >
            <el-button
              size="small"
              type="success"
              @click="unsealBtn(scope.row)"
              round
              v-if="scope.row.state == 0"
              >解封充值</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import {
  rechargeRechargeAudit,
  rechargeSystemRechargeAudit,
  rechargeAddGoldCoins,
  rechargeBan,
} from "@/api/AuditManagement";
import { channelList } from "@/api/DataManagement";
import Pagination from "@/components/Pagination"; // 分页

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      loading: true,
      loadingA: true,
      index: 1,
      input: "",
      id: "", //ID
      orderNumber: "", //订单号
      pay_order_number: "", //第三方订单
      //   code: "",
      // name: "", //昵称
      phone: "", //手机号
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      gradeTimeValStartDate: "", //时间开始
      gradeTimeValEndDate: "", //时结束
      gradeTimeVal: "", //时间
      options: [
        {
          value: 0,
          label: "封禁",
        },
        {
          value: 1,
          label: "正常",
        },
      ],
      stateVal: "", //状态
      optionsB: [
        {
          value: "100",
          label: "100金币",
        },
        {
          value: "1000",
          label: "1000金币",
        },
        {
          value: "5000",
          label: "5000金币",
        },
      ],
      //支付方式
      paymentMethodVal: "", //状态
      paymentMethodOptions: [
        {
          value: "",
          label: "不限支付方式",
        },
        {
          value: "1",
          label: "支付宝",
        },
        {
          value: "2",
          label: "微信",
        },
        {
          value: "3",
          label: "IOS",
        },
      ],
      //充值类型
      rechargeVal: "", //状态
      rechargeOptions: [
        {
          value: "1",
          label: "金币",
        },
        {
          value: "2",
          label: "会员",
        },
      ],
      //支付状态
      paymentStatusVal: "",
      paymentStatusOptions: [
        {
          value: "0",
          label: "未支付",
        },
        {
          value: "1",
          label: "已支付",
        },
        {
          value: "2",
          label: "支付失败",
        },
      ],
      tableData: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
    };
  },
  methods: {
    //充值审核列表
    rechargeRechargeAudit() {
      this.loading = true;
      rechargeRechargeAudit({
        page: this.page,
        pageSize: this.pageSize,
        startTime: "",
        endTime: "",
        id: "",
        name: "",
        phone: "",
        state: "", //状态 0封禁 1正常
        pay_order_number: "", //第三方订单
        type: "", //充值类型
        order_status: "", //订单状态
        pay_type: "", //支付方式
        // code: "", //邀请码
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    // 导出excel
    async excel() {
      let res = await rechargeRechargeAudit({
        page: 1,
        pageSize: 10000,
        startTime: "",
        endTime: "",
        id: "",
        name: "",
        phone: "",
        state: "", //状态 0封禁 1正常
        pay_order_number: "", //第三方订单
        type: "", //充值类型
        order_status: "", //订单状态
        pay_type: "", //支付方式
      });
      //   console.log(res.data.list, "excel");
      res.data.list.forEach((item) => {
        item.order_status == 0
          ? (item.order_status = "未支付")
          : item.order_status == 1
          ? (item.order_status = "已支付")
          : (item.order_status = "支付失败");
        item.pay_type == 1
          ? (item.pay_type = "支付宝")
          : item.pay_type == 2
          ? (item.pay_type = "微信")
          : item.pay_type == 3
          ? (item.pay_type = "IOS")
          : (item.pay_type = "无");
        item.type == 1 ? (item.type = "金币") : (item.type = "会员");
        item.state == 0 ? (item.state = "封禁") : (item.state = "正常");
      });
      //   console.log(res.data.list, "excel");

      const head = [
        "订单状态",
        "订单号",
        "第三方订单",
        "支付方式",
        "充值时间",
        "充值类型",
        "用户ID",
        "用户昵称",
        "充值金额",
        "充值金币",
        "充值功能",
      ];
      const fiald = [
        "order_status",
        "orderNumber",
        "pay_order_number",
        "pay_type",
        "payTime",
        "type",
        "userId",
        "nickName",
        "payAmount",
        "goldCoin",
        "state",
      ];
      this.$excel(res.data.list, head, fiald, `用户充值记录`);
    },
    //搜索查询
    rechargeRechargeAuditBtn() {
      this.page = 1;
      this.loading = true;
      rechargeRechargeAudit({
        page: this.page,
        pageSize: this.pageSize,
        startTime:
          this.gradeTimeValStartDate == undefined
            ? ""
            : this.gradeTimeValStartDate,
        endTime:
          this.gradeTimeValEndDate == undefined ? "" : this.gradeTimeValEndDate,
        id: this.id,
        name: this.name,
        phone: this.phone,
        state: this.stateVal, //状态 0封禁 1正常
        orderNumber: this.orderNumber,
        pay_order_number: this.pay_order_number,
        type: this.rechargeVal,
        order_status: this.paymentStatusVal, //订单状态
        pay_type: this.paymentMethodVal, //支付方式
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },

    //封禁
    userBanBtn(row) {
      this.$confirm("此操作将封禁该用户, 是否继续?", "封禁提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rechargeBan({
            id: row.userId,
            ban: "0",
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "封禁成功",
                type: "success",
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消封禁",
          });
        });
    },
    //解封
    unsealBtn(row) {
      this.$confirm("此操作将解封该用户, 是否继续?", "解封提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rechargeBan({
            id: row.userId,
            ban: "1",
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "解封成功",
                type: "success",
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解封",
          });
        });
    },
    //分页
    getList() {
      this.loading = true;

      rechargeRechargeAudit({
        page: this.page,
        pageSize: this.pageSize,

        startTime:
          this.gradeTimeValStartDate == undefined
            ? ""
            : this.gradeTimeValStartDate,
        endTime:
          this.gradeTimeValEndDate == undefined ? "" : this.gradeTimeValEndDate,
        id: this.userId,
        name: this.name,
        phone: this.phone,
        state: this.stateVal, //状态 0封禁 1正常
        pay_order_number: this.pay_order_number,
        type: this.rechargeVal,
        order_status: this.paymentStatusVal, //订单状态
        pay_type: this.paymentMethodVal, //支付方式
        // code: this.code, //邀请码
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },

    //时间
    focus(time) {
      if (!this.gradeTimeVal) {
        this.gradeTimeVal = [];
      }
      this.gradeTimeValStartDate = this.gradeTimeVal[0];
      this.gradeTimeValEndDate = this.gradeTimeVal[1];
    },
  },
  created() {
    this.rechargeRechargeAudit();
    // this.channelList();
  },
};
</script>

<style lang="less" scoped>
.RechargeRecord {
  margin: 30px;
  height: 100%;
  .searchBox {
    .one {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      .el-input {
        width: 200px;
        margin-right: 20px;
        margin-bottom: 20px;
      }
      .el-select {
        margin-right: 20px;
      }
      .el-button {
        margin-left: 20px;
        height: 40px;
      }
      p {
        margin-right: 10px;
      }
    }
  }
  .p {
    display: flex;
    p {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
  .active {
    background-color: #0079fe;
    color: #fff;
    border-radius: 10px;
  }
}
</style>